{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static "plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css" %}">
    <link rel="stylesheet" href="{% static "plugins/sweetalert/sweetalert.css" %}">
</head>
<body>
<div class="row">
    <div class="col-md-1"></div>
    <div class="col-md-2">
        <a href="http://127.0.0.1:8000/muser/"><button type="button" class="btn btn-primary">用户管理</button></a><br>
        <a href="http://127.0.0.1:8000/mcaracter/"><button type="button" class="btn btn-primary">角色管理</button></a>
    </div>
    <div class="col-md-8">
        <a href="http://127.0.0.1:8000/add/">
            <button type="button" class="btn btn-primary">添加用户</button>
        </a>
        <form action="http://127.0.0.1:8000/find/" method="post">
        {% csrf_token %}
        <label for="">
            <input type="text" class="form-control" id="exampleInputEmail2" placeholder="请输入姓名" name="fname">
        </label>
        <label for="">
            <input type="text" class="form-control" id="exampleInputEmail2" placeholder="请输入手机号" name="ftel">
        </label>
        <label for="">
            <input type="text" class="form-control" id="exampleInputEmail2" placeholder="请输入性别" name="fsex">
        </label>
        <button type="submit" class="btn btn-default">搜索</button>
    </form>
        <table class="table table-striped">
        <thead>
            <tr>
                <th>序号</th>
                <th>用户id</th>
                <th>用户名</th>
                <th>手机号</th>
                <th>性别</th>
                <th>角色</th>
                <th>操作</th>
            </tr>
        </thead>
        {% for i in ls %}
            <tbody>
                <tr>
                    <td>{{ forloop.counter }}</td>
                    <td>{{ i.id }}</td>
                    <td>{{ i.username }}</td>
                    <td>{{ i.tel }}</td>
                    <td>{{ i.sex }}</td>
                    <td>{{ i.caracter }}</td>
                    <td>
                        <a href="/edit/{{ i.id }}">
                            <button type="button" class="btn btn-warning">编辑</button>
                        </a>
                        <button class="btn btn-danger ajax_sub" xx="{{ i.pk }}">删除</button>

                    </td>
                </tr>
            </tbody>
        {% endfor %}
    </table>
    </div>
</div>
    
</body>
<script src="{% static "plugins/jquery.js" %}"></script>
<script src="{% static "plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js" %}"></script>
<script src="{% static "plugins/sweetalert/sweetalert.min.js" %}"></script>
<script>
    $('.ajax_sub').on('click',function () {
    var user_id = $(this).attr('xx');  //获取xx属性对应的值
    var ths = $(this); // 保存一下这个this
    swal({
        title: "确认删除吗？",
        text: "删除后无法找回!",
        type: "warning",
        showCancelButton: true,
        confirmButtonClass: "btn-danger",
        confirmButtonText: "确认删除",
        cancelButtonText: "取消删除",
        closeOnConfirm: false
    },
     function (isConfirm){
        if(isConfirm){
            $.ajax({
            type: 'get',
            url: '/ajax_del_user/' + `${user_id}` + '/',
            success: function (res) {
                if (res.status === 1) {
                    swal("删除成功!", "该条记录已被删除", "success");
                    ths.parent().parent().remove();
                } else {
                    swal("删除失败", "删除动作有有误!", "error");
                }
            },
        })}else {
            swal('no')
        }
    })
})

</script>
</html>